<template>
  <div class="test" style="width: 100%; margin-right: 20px; height:  400px;; float: right">
    <div id="chart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
export default {
  name: "MoreLineChart",
  data() {
    return {};
  },
  methods: {
    //各种类科研项目的发表-折线图
    getProjectLine() {
      this.$http.post("/count/project/line").then((res) => {
        // console.log(res)
        this.chartGetProjectLine(res)
      });
    },
    chartGetProjectLine(data) {
      const countries = [
        'Finland',
        'France',
        'Germany',
        'Iceland',
        'Norway',
        'Poland',
        'Russia',
        'United Kingdom'
      ];
      const datasetWithFilters = [];
      const seriesList = [];
      this.chart = this.$echarts.init(document.getElementById("chart"));
      this.$echarts.util.each(countries, function (country) {
        const datasetId = 'dataset_' + country;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                {dimension: 'Year', gte: 1950},
                {dimension: 'Country', '=': country}
              ]
            }
          }
        });
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: false,
          name: country,
          endLabel: {
            show: true,
            formatter: function (params) {
              return params.value[3] + ': ' + params.value[0];
            }
          },
          labelLayout: {
            moveOverlap: 'shiftY'
          },
          emphasis: {
            focus: 'series'
          },
          encode: {
            x: 'Year',
            y: 'Income',
            label: ['Country', 'Income'],
            itemName: 'Year',
            tooltip: ['Income']
          }
        });
      });
      this.chart.setOption({
        animationDuration: 10000,
        dataset: [
          {
            id: 'dataset_raw',
            // source: data
          },
          ...datasetWithFilters
        ],
        title: {
          text: 'Income of Germany and France since 1950'
        },
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          name: 'Income'
        },
        grid: {
          right: 140
        },
        series: seriesList
      });
    }
  },
  mounted() {
    this.getProjectLine();
  },
};
</script>
